import React, {useEffect} from "react";
import {BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom'
import {Prompt} from 'react-router-dom'
// import {RouterContext} from '../components/kPrompt/Context'
// import Prompt from '../components/kPrompt/index'

export default class RouterPage extends React.Component {
    state = {
        count: 0
    }
    add = () => {
        // this.setState(state => ({count: state.count + 1}))
        this.setState({count: this.state.count + 1})

    }

    render() {
        return <>
            <h3>RouterPage</h3>

            <Router>
                {/*Link相当于a标签，to的值相当于href*/}
                <Link to={'/'}>首页</Link>
                <Link to={'/user'}>用户中心</Link>
                <Link to={'/login'}>登录</Link>
                <Link to={'/product'}>商品</Link>
                <Link to={'/funChildren'}>函数子组件更新</Link>
                <Link to={'/funChildren2'}>children不是函数</Link>

                <button onClick={() => this.add()}>add更新页面</button>
                {/*Switch可以让Route只渲染到一个匹配的就停下来*/}
                <Switch>
                    {/*Route是路由匹配，path是匹配路径，exact可以让路由精确匹配，component是匹配目标组件，如果写成返回组件的函数，则会随页面更新而挂载卸载*/}
                    {/*children和render也可匹配渲染目标，是函数，但children是无论如何都渲染，其它两者只有匹配了才渲染*/}
                    {/* 如果同时存在，则匹配的优先级：children > component > render，三者互斥，同时只会渲染一个出来 */}
                    <Route exact path={'/'} component={Home}/>
                    {/*<Route path={'/user'} component={()=><User count={this.state.count}/>}/>*/}
                    {/*<Route path={'/user'} render={()=><User count={this.state.count}/>}/>*/}
                    <Route path={'/user'} children={() => <User count={this.state.count}/>}/>
                    <Route path={'/login'} children={() => <div>children无论是否匹配都会渲染(switch可以干掉这个功能)，且优先级最高</div>}
                           render={() => <Login>render</Login>}/>
                    <Route path={'/product'} component={Product}/>
                    {/*<Route path={'/funChildren'} component={() => <FunChildren count={this.state.count}/>}/>*/}
                    <Route path={'/funChildren'} children={() => <FunChildren/>}/>
                    <Route path={'/funChildren2'}><FunChildren count={this.state.count} message={'children不是函数而是子组件'}/></Route>

                    {/*没有path属性，如果前面的匹配不到就会渲染*/}
                    <Route component={Empty}/>
                </Switch>

            </Router>
        </>
    }
}

class Home extends React.Component {
    render() {
        return <div>HomePage</div>
    }
}

class User extends React.Component {
    componentDidMount() {
        console.log('User-componentDidMount')
    }

    componentWillUnmount() {
        console.log('User-componentWillUnmount')
    }

    render() {
        return <div>
            UserPage 计数器：{this.props.count}
            <p>如果通过component渲染一个返回组件的匿名函数，则会随页面更新而挂载卸载，请看控制台</p>
            <p>如果通过children和render渲染就没问题</p>
        </div>
    }
}

function FunChildren(props) {

    useEffect(()=>{
        // 触发卸载
        return ()=>{
            console.log('FunChildren-WillUnmount')
        }
    },[])

    return <div>
        UserPage 计数器：{props.count}
        <div><strong>{props.message}</strong></div>
        <p>如果通过component渲染一个返回组件的匿名函数，则会随页面更新而挂载卸载，请看控制台</p>
        <p>如果通过children和render渲染就没问题</p>
    </div>
}

class Login extends React.Component {
    render() {
        return <div>LoginPage</div>
    }
}

class Product extends React.Component {
    render() {
        return <div>
            <h3>productPage</h3>
            {/* when的值为true则启用，为false则禁用。*/}
            <Prompt

                when={true}
                // message={'确定要离开吗？'}
                message={(location) => {
                    return '真的要离开吗？'
                }}
            />
        </div>
    }
}

class Empty extends React.Component {
    render() {
        return <div>找不到地址 404</div>
    }
}




